<template>
	<view>
		<view class="cu-custom" :style="{height: $wanlshop.wanlsys().height + 'px' }">
			<view class="cu-bar fixed" :style="{
				height: $wanlshop.wanlsys().height + 'px', 
				paddingTop: $wanlshop.wanlsys().top + 'px',
				color: '#333333',
				backgroundImage: 'url(' + $wanlshop.oss('/uploads/20230921/acd98ace6f530a4929301645e2d81244.png') + ')'
			}">
				<view class="action"></view>
				<view class="content text-bold" :style="{top: $wanlshop.wanlsys().top + 'px'}">
					圈子
				</view>
				<view class="action">
					<view class="navTitle" @click="jump('/pages/circle/posted')">发帖</view>
				</view>
			</view>
		</view>
		<wanl-scroll-list ref="list" :option="option" @load="load($event,'load')" @refresh="load($event,'refresh')">
			<!-- 轮播图 -->
			<view class="wrap" v-if="bannerList.length > 0">
				<!-- <u-swiper :list="bannerList" height='208' border-radius='0'></u-swiper> -->
				<swiper class="screen-swiper square-dot" :indicator-dots="true" :circular="true" :autoplay="true"
					interval="5000" duration="500">
					<swiper-item v-for="(item,index) in bannerList">
						<image :src="$wanlshop.oss(item.media)" mode="aspectFill"></image>
					</swiper-item>
				</swiper>
			</view>
			<!-- 金刚区 -->
			<view class="category">
				<block v-for="(item,index) in categoryList">
					<view class="categoryItem" v-if="index < moreIndex"
						@click="jump('/pages/circle/index?id='+item.id + '&name='+ item.name)">
						<image :src="$wanlshop.oss(item.image)" class="categoryItemImg" mode="aspectFill"></image>
						<view class="categoryItemText">{{item.name}}</view>
					</view>
				</block>

				<view class="categoryItem" @click="categoryClick()" v-if="moreIndex >= 14">
					<image src="/static/img/more.png" class="categoryItemImg" mode="widthFix"></image>
					<view class="categoryItemText">{{moreIndex == 15?'查看更多':'收起更多'}}</view>
				</view>
			</view>


			<!-- 圈子消息 -->
			<block v-for="(item,index) in list">
				<view class="circle" @click="jump('/pages/circle/details?id='+item.id)">
					<view class="circleItem">
						<view class="circleItemTitle">{{item.title}}</view>
						<view class="circleItemContent">{{item.content}}</view>
						<view class="circleItemCome">来自<text>{{item.category_text}}</text></view>
						<view class="circleItemImg">
							<block v-for="(itm,idx) in item.images">
								<image :src="$wanlshop.oss(itm)" mode="aspectFill"
									@click.stop="onPreviewTap(item.images,idx)"></image>
							</block>
						</view>
						<view class="circleItemFooter">
							<view class="footerFlex">
								<image :src="$wanlshop.oss(item.user.avatar)" class="footerFlexImg"></image>
								<view class="footerFlexName">{{item.user.nickname}}</view>
								<view class="iconfont icon-liulan1"></view>
								<view class="footerFlexNum">{{item.browse}}</view>
								<view @click.stop="iscollect(item,index)" style="display: flex;
								align-items: center;">
									<view class="iconfont icon-shoucang" v-if="item.isCollect == 1"></view>
									<view class="iconfont icon-shoucang3" v-else></view>
									<view class="footerFlexNum">{{item.collect}}</view>
								</view>
								<view @click.stop="commentInput(item.id)" style="display: flex;
								align-items: center;">
									<view class="iconfont icon-comment"></view>
									<view class="footerFlexNum">{{item.comment}}</view>
								</view>



							</view>
						</view>
					</view>
				</view>
			</block>
			<wanl-empty :text="option.emptyText" src="collect_default3x" v-if="list.length === 0" />
		</wanl-scroll-list>
		<!-- 新增评论-start -->
		<view class="comment-submit-box" v-if="submit" @click="closeInput">
			<!-- 下边的click.stop.prevent用于让上边的click不传下去，以防点到下边的空白处触发closeInput方法 -->
			<view class="comment-add" @click.stop.prevent="stopPrevent" :style="{bottom:KeyboardHeight + 'px'}">
				<!-- :style="'bottom:' + KeyboardHeight + 'rpx'" -->
				<view class="comment-submit">
					<view class="btn-click cancel" @click="closeInput">取消</view>
					<view>
						<view class="btn-click" @click="add">发布</view>
					</view>
				</view>
				<textarea class="textarea" v-model="content" :placeholder="placeholder" :adjust-position="false"
					:show-confirm-bar="false" @blur="blur" @focus="focusOn" :focus="focus"></textarea>
			</view>
		</view>
		<!-- 新增评论-end -->
		<view class="edgeInsetBottom"></view>


	</view>
</template>

<script>
	export default {
		data() {
			return {
				bannerList: [],
				moreIndex: 0,
				storeIndex: 0,
				categoryList: [],
				list: [],
				isCollect: 2,
				submit: false,
				content: '',
				placeholder: '有话要说，快来评论',
				KeyboardHeight: '',
				focus: '',
				pid:'',
				source_id:'', // 暂存id
				option: {
					auto: true,
					safeArea: true,
					emptyText: '没有找到圈子消息'
				}
			}
		},
		onLoad() {
			this.categoryLists()
			this.bannerPost()
		},
		methods: {
			load(paging,key) {
				// 圈子列表
				uni.request({
					url: '/addons/circle/api.index/lists',
					method: 'post',
					data: {
						page: paging.page
					},
					success: res => {
						console.log(res)
						res.data.data.forEach((item, index) => {
							if (item.images) {
								const arr = item.images.split(',')
								const newArr = arr.map(itm => {
									return this.$wanlshop.oss(itm)
								})
								item.images = newArr
							}
						})
						let list = res.data.data;
						if(key == 'load') {
							this.list = [...this.list, ...list];
							this.$refs.list.loadSuccess({ list: this.list, total: res.data.total });
							this.$refs.list.showEmpty = false;
						} else if(key == 'refresh') {
							this.list = list;
							this.$refs.list.refreshSuccess({ list: this.list, total: res.data.total });
							this.$refs.list.showEmpty = false;
						}
					}
				});
			},
			// 输入评论
			commentInput(id) {
				// TODO 调起键盘方法
				this.submit = true;
				setTimeout(() => {
					this.focus = true;
				}, 50)
				this.pid = 0
				this.source_id = id
			},
			// 没用的方法，但不要删
			stopPrevent() {},
			// 输入框失去焦点
			blur() {
				this.focus = false;
			},
			// 输入框聚焦
			focusOn() {
				this.$emit('focusOn');
			},
			// 新增评论
			async add() {
				if (!this.content) {
					uni.showToast({
						title: '评论内容过短',
						icon: 'none',
						duration: 2000
					});
					return
				}
				await uni.request({
					url: '/addons/circle/api.comment/add',
					method: 'post',
					data: {
						type: "6",
						circle_id: this.source_id,
						content: this.content,
						pid: this.pid
			
					},
					success: res => {
						this.content = ''
						this.focus = false;
						this.submit = false;
						uni.showToast({
							title: '评论成功',
							icon: 'none',
							duration: 2000
						});
						this.$refs.list.refreshScrollView()
						this.load({page:1},'refresh')
					}
				});
			
			},
			// 关闭输入评论
			closeInput() {
				this.content = '';
				this.placeholder = '有话要说，快来评论';
				this.focus = false;
				this.submit = false;
			},
			// 判断是否收藏
			async iscollect(item, index) {
				// await uni.request({
				// 	url: '/member/collect/iscollect',
				// 	method: 'post',
				// 	data: {
				// 		type: "6",
				// 		source_id: id,

				// 	},
				// 	success: res => {
				// 		console.log('判断是否收藏', res)
				// 		this.isCollect = res.data
				// 		this.collectAdd(id, index)
				// 	}
				// });
				this.collectAdd(item, index)
			},
			// 收藏 
			async collectAdd(item, index) {
				await uni.request({
					url: '/addons/circle/api.collect/add',
					method: 'post',
					data: {
						circle_id: item.id
					},
					success: res => {
						console.log('收藏', res)
						if (item.collect == 1) {
							uni.showToast({
								title: '取消收藏成功',
								icon: 'none',
								duration: 2000
							});

						} else {
							uni.showToast({
								title: '收藏成功',
								icon: 'none',
								duration: 2000
							});
						}
						this.$refs.list.refreshScrollView()
						this.load({page:1},'refresh')
					}
				});
			},
			jump(url) {
				this.$wanlshop.auth(url)
				// uni.navigateTo({
				// 	url: url
				// })
			},
			// banner
			async bannerPost() {
				await uni.request({
					url: '/publics/advert/content',
					method: 'post',
					data: {
						position: 'circle_index'
					},
					success: res => {
						console.log("banner", res)
						this.bannerList = res.data
					}
				});
			},
			// 金刚区
			async categoryLists() {
				await uni.request({
					url: '/addons/circle/api.index/category',
					method: 'post',
					data: {
						type: 'circle'
					},
					success: res => {
						// console.log("res", res)
						this.categoryList = res.data
						if (this.categoryList.length > 14) {
							this.moreIndex = 14
							this.storeIndex = this.categoryList.length
						} else {
							this.moreIndex = this.categoryList.length
							this.storeIndex = this.categoryList.length
						}
					}
				});
			},
			// /api/
			// 展示更多
			categoryClick() {
				if (this.moreIndex > 14) {
					this.moreIndex = 14
				} else {
					this.moreIndex = this.storeIndex
				}
			},
			// 预览图片
			onPreviewTap(url, index) {
				uni.previewImage({
					current: index,
					urls: url
				})
			},
		}
	}
</script>

<style lang="scss">
	.navTitle {
		width: 90rpx;
		height: 56rpx;
		border-radius: 8rpx;
		border: 2rpx solid #4CBD66;
		text-align: center;
		line-height: 52rpx;
		font-size: 32rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #4CBD66;
	}

	.wrap {
		padding: 10rpx 0;
	}

	.screen-swiper {
		width: 100%;
		height: 208rpx;
		min-height: 0;
		max-height: 208rpx;
	}

	// 金刚区
	.category {
		width: 100%;
		height: auto;
		background: #fff;
		display: flex;
		flex-wrap: wrap;

		.categoryItem {
			width: 20%;
			height: auto;
			text-align: center;
			margin-top: 22rpx;
			margin-bottom: 16rpx;

			.categoryItemImg {
				width: 72rpx;
				height: 72rpx;
				border-radius: 100%;
			}

			.categoryItemText {
				font-size: 24rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				color: #000000;
				margin-top: 18rpx;
			}
		}
	}

	// 圈子消息
	.circle {
		padding: 28rpx 30rpx 16rpx 30rpx;
		background: #fff;
		margin-top: 20rpx;
		height: auto;

		.circleItem {
			width: 100%;
			height: auto;

			.circleItemTitle {
				font-size: 34rpx;
				font-family: PingFang SC-Bold, PingFang SC;
				font-weight: bold;
				color: #333333;
				line-height: 40rpx;
			}

			.circleItemContent {
				font-size: 30rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				color: #777777;
			}

			.circleItemCome {
				font-size: 26rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				color: #777777;
				margin-top: 8rpx;

				text {
					font-size: 28rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 500;
					color: #4CBD66;
					margin-left: 8rpx;
				}
			}

			.circleItemImg {
				width: 100%;
				height: auto;
				display: flex;
				flex-wrap: wrap;

				image {
					width: 210rpx;
					height: 210rpx;
					margin-top: 16rpx;
				}

				image:nth-child(2) {
					margin-left: 30rpx;
					margin-right: 30rpx;
				}

				image:nth-child(5) {
					margin-left: 30rpx;
					margin-right: 30rpx;
				}

				image:nth-child(8) {
					margin-left: 30rpx;
					margin-right: 30rpx;
				}
			}

			.circleItemFooter {
				width: 100%;
				border-top: 1rpx solid #e2e2e2;
				margin-top: 38rpx;
				height: auto;

				.footerFlex {
					margin-top: 16rpx;
					display: flex;
					align-items: center;

					.footerFlexImg {
						width: 42rpx;
						height: 42rpx;
						border-radius: 100%;
					}

					.footerFlexName {
						font-size: 24rpx;
						font-family: PingFang SC-Medium, PingFang SC;
						font-weight: 500;
						color: #888888;
						margin-left: 8rpx;
					}

					.icon-liulan1 {
						margin-left: auto;
						font-size: 32rpx;
					}

					.footerFlexNum {
						font-size: 26rpx;
						font-family: PingFang SC-Bold, PingFang SC;
						color: #777777;
						margin-left: 10rpx;
					}

					.icon-shoucang,.icon-shoucang3 {
						margin-left: 44rpx;
						font-size: 32rpx;
					}
					.icon-shoucang {
						color: #76bc69;
					}
					.icon-comment {
						margin-left: 54rpx;
						font-size: 32rpx;
					}
				}
			}
		}
	}
	.comment-submit-box {
		position: fixed;
		display: flex;
		align-items: flex-end;
		z-index: 9900;
		left: 0;
		top: var(--window-top);
		bottom: 0;
		background-color: rgba($color: #000000, $alpha: 0.5);
		width: 100%;
		height: 100%;
	}
	
	.comment-add {
		position: fixed;
		background-color: #FFFFFF;
		width: 100%;
		padding: 5rpx;
		left: 0;
		// bottom: 0;
		border: 1px solid #ddd;
		transition: .3s;
		-webkit-transition: .3s;
	}
	
	.btn-click {
		color: #007AFF;
		font-size: 28rpx;
		padding: 10rpx;
	}
	
	.cancel {
		color: #606266;
	}
	
	.textarea {
		height: 100px;
		padding: 16rpx;
		width: 100%;
		font-size: 28rpx;
	}
	
	.comment-submit {
		padding: 5rpx 20rpx 0 20rpx;
		border-bottom: 1px dashed #ddd;
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
</style>